<template>
	<view class="xmdt">
		<swiper class="swiper" :autoplay="autoplay"  :interval="interval" :duration="duration" :circular='true' :vertical="true">
			<swiper-item 
				v-for="(item,index) in dataList"
				:key="index">
				<view class="swiper_item">
					<view class="left">
					</view>
					<view class="centre">
						<view class="">{{item.content}}</view>
					</view>
					<view class="right">
						<view class="">{{ getTime(item,1)}}</view>
						<view class="">{{ getTime(item,2)}}</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	export default { //项目动态组件
		name: "XmdtcP",
		props: ['dataList'],
		data() {
			return {
				autoplay: true,
				interval: 4000,
				duration: 2000
			}
		},
		methods: {
			getTime(item, val){
				let data = new Date(item.createTime)
				if(val == 1){
					return item.time = data.getHours() + ':' + data.getMinutes()
				}else{
					return item.data = (data.getMonth() + 1) + '月' + data.getDay() + '日'
				}
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	@mixin flex_layout_row {
		//水平布局
		display: flex;
		flex-direction: row;
	}

	@mixin flex_layout_column {
		//垂直布局
		display: flex;
		flex-direction: column;
	}
	.swiper{
		width: 100%;
		height: 80px;
		background-color: #fff;
		border-radius: 5px;
	}
	.swiper_item{
		padding: 0 15px;
		height: 80px;
		width: 100%;
		background-color: #ffffff;
		@include flex_layout_row;
		align-items: stretch;
		// padding: 0 10px;
		box-sizing: border-box;
		.left {
			flex: 1;
			width: 0;
			margin-right: 20px;
			background-color: #18B566;
			background-image: url(../../static/projectDT.png);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center 0;
		}
		
		.centre {
			flex: 4;
			width: 0;
			font-size: 14px;
			color: #616161;
			@include flex_layout_column;
			justify-content: space-between;
			align-items: flex-start;
			padding: 10px 0;
			margin-right: 15px;
			overflow: hidden;
		
			>view {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 4; //行数
				-webkit-box-orient: vertical;
			}
		}
		
		.right {
			flex: 1;
			width: 0;
			font-size: 12px;
			padding: 10px 0;
			color: #999999;
			@include flex_layout_column;
			justify-content: space-between;
			align-items: flex-end;
		}
		
	}
	.xmdt {
		
		
	}
</style>
